<template>
  <div class="base-progress">
    <div class="inner" :style="{ width: w + '%' }">
      <span>{{ w }}%</span>
    </div>
  </div>
</template>

<script>
export default {
  // props: ["w"],

  // 1.基础写法（类型校验）
  // props: {
  //   w: Number
  // }
  // 2.完整写法（类型、是否必填、默认值、自定义校验）
  props: {
    w: {
      type: Number,
      // required: true,
      default: 10,
      // 一般，required 和 default 二选一
      // 当 Vue 默认的校验配置满足不了校验需求的时候，就可以用自定义校验器（自己来实现校验规则逻辑）来实现
      // 只有一个形参(value): 属性值
      validator(value) {
        // // 自定义校验器中的 this 为 undefined，并且执行时机比 created 早，也不能访问数据
        // console.log(this, 'this');
        // 如果返回值为 truly：通过，falsy（假值：0, '', null, undefined, false）：校验失败
        // 注意：一定要返回，如果不返回(undefined)，则表示校验失败
        if (value < 0 || value > 100) return false
        // if (value < 0 || value > 100) throw new Error('属性 w 只能是 0~100 之间！')
        return true
      }
    }
  },
  created() {
    console.log('created');
  }

}
</script>

<style scoped>
.base-progress {
  height: 26px;
  width: 400px;
  border-radius: 15px;
  background-color: #272425;
  border: 3px solid #272425;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.inner {
  position: relative;
  background: #379bff;
  border-radius: 15px;
  height: 25px;
  box-sizing: border-box;
  left: -3px;
  top: -2px;
}
.inner span {
  position: absolute;
  right: 0;
  top: 26px;
}
</style>